<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- 下拉框 -->
<template>
    <div class="select_line" v-show="showGears" :style="selectStyle">
        <p
            class="option_line" :class="{light: item.actived}"
            v-for="(item, i) in optionList" :key="i"
            @click.stop="chooseOption(i)"
        >
            <span :class="{'rtl-l text-r': $rtl}">{{ item.value }}</span>
            <span class="fineBorder"></span>
        </p>
    </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
    props:{
        showGears: {
            type: Boolean,
            default: false
        },
        optionList: {
            type: Array
        },
        selectStyle: {
            type: Object
        },
        setBtn: {
            type: Boolean
        },
        strength: { //力度按钮
            type: Boolean,
            default: false
        },
        massageTimer: { //按摩定时
            type: Boolean,
            default: false
        }
    },
    model: {
        props: "showGears",
        event: "changeGears"
    },
    mounted(){
        let that = this;
        document.body.addEventListener('click',function(){
            if(that.showGears){
                that.$emit('changeGears',!that.showGears);
            }
        })
    },
    methods: {
        ...mapMutations(['changeGear', 'changeTimer']),
        chooseOption(index){
            let that = this;
            let timeout = setTimeout(()=>{
                that.$emit('changeGears',!that.showGears);
                that.$emit('choose',index);
                clearTimeout(timeout);
            },50);

            if(this.setBtn) return; // 非顶部按钮

            if(this.strength){  // 档位切换
                this.changeGear(index);
            }else if(this.massageTimer){  // 按摩定时
                this.changeTimer(index);
            }
        }
    },
}
</script>
<style scoped>
    .select_line{
        position: absolute;
        width: 96%;
        max-height: 21.6rem;
        border-radius: 1.6rem;
        box-shadow: 0 2px 30px 0 rgb(0 0 0 / 20%);
        padding: .4rem;
        overflow: hidden auto;
        z-index: 10;

        /* 清除下拉框滚动条 */
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }

    /* Chrome Safari 清除下拉框滚动条 */
    .select_line::-webkit-scrollbar {
        display: none; 
    }

    .option_line{
        height: 4.8rem;
        line-height: 4.8rem;
        padding: 0 1.17rem;
        border-radius: 1.4rem;
        display: flex;
        flex-direction: column;
    }

    .option_line:active{
        background: rgba(251,101,34,0.10);
    }

    .option_line span{
        width: 100%;
        font-size: 1.6rem;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .option_line:last-child .fineBorder{
        border: 0;
    }

    .light{
        background: rgba(251,101,34,0.10);
    }
</style>